const oSliderItems = document.querySelectorAll('.slider-item'),
  classNames = [];

let t = null;

const init = () => {
  collectClassNames();
  sliderAction();
};

function collectClassNames() {
  let oSliderItem = null;

  for (let i = 0; i < oSliderItems.length; i++) {
    oSliderItem = oSliderItems[i];
    classNames.push(oSliderItem.className);
  }

  // console.log(classNames);
  //['slider-item first', 'slider-item second right', 'slider-item third', 'slider-item second left']
}

//将类名轮询起来
function setClassNames() {
  //1.先删除最后一项类名
  //2.将当前被删除的最后一项又插入到第一项
  //3.重写类名
  classNames.unshift(classNames.pop());

  render();
}

function sliderAction() {
  t = setInterval(setClassNames, 3000);
}

function render() {
  let oSliderItem = null;

  for (let i = 0; i < oSliderItems.length; i++) {
    oSliderItem = oSliderItems[i];
    //重写类名
    oSliderItem.className = classNames[i];
  }
}

init();
